<template>
	<u-popup v-model="showPop" mode="center" border-radius="14" :closeable="true" width="520rpx">
		<view class="u-p-20 u-m-t-40 u-m-b-40">
			<view class="u-font-34 yu-bold yu-color-3 u-text-center">新建班级</view>
			<u-form :model="lessionForm" ref="uForm">
				<u-form-item label="星期:" prop="weekday">
					<u-input v-model="lessionForm.weekday" type="select" :border="true" @click="weekshow = true" />
					<u-select v-model="weekshow" :list="weekdaylist" @confirm="checkWeek"></u-select>
				</u-form-item>
				<u-form-item label="班级名称:" prop="classname">
					<u-input v-model="lessionForm.content" type="textarea" :border="true" :auto-height="true" :height="50" />
				</u-form-item>
				<u-form-item label="开始时间" @confirm="checkStarttime" prop="starttime">
					<u-picker mode="time" v-model="starttimeshow" :params="timeparams"></u-picker>
				</u-form-item>
				<u-form-item label="结束时间" @confirm="checkEndtime" prop="endtime">
					<u-picker mode="time" v-model="endtimeshow"></u-picker>
				</u-form-item>
			</u-form>
			<u-button type="warning" :ripple="true" ripple-bg-color="#909399" @click="addSave">确认创建</u-button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				weekshow: false,
				starttimeshow: false,
				endtimeshow: false,
				timeparams: {
					year: false,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				lessionForm: {
					weekday: '',
					classname: '',
					starttime: '',
					endtime: ''
				},
				weekdaylist: [{
						label: '星期一',
						value: 0
					},
					{
						label: '星期二',
						value: 1
					},
					{
						label: '星期三',
						value: 2
					},
					{
						label: '星期四',
						value: 3
					},
					{
						label: '星期五',
						value: 4
					},
					{
						label: '星期六',
						value: 5
					},
					{
						label: '星期日',
						value: 6
					}
				],
				rules:{
					weekday: [
						{required: true, message: '必须选择星期',trigger: 'change'}
					],
					classname: [
						{required: true, message: '必须填写课程名称',trigger: 'change'}
					],
					starttime: [
						{required: true, message: '必须填写开始时间',trigger: 'change'}
					],
					endtime:[
						{required: true, message: '必须填写结束时间',trigger: 'change'}
					]
				}
			};
		},
		methods: {
			init(data) {
				this.showPop = true
				setTimeout(()=>{this.$refs.uForm.setRules(this.rules);}, 10)
			},
			checkWeek(val) {
				console.log(val);
				// this.lessionForm.weekday = val
			},
			checkStarttime(val) {
				console.log(val);
				// this.lessionForm.starttime = val
			},
			checkEndtime(val) {
				console.log(val);
				// this.lessionForm.endtime = val
			},
			addSave(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$http('/class/addclass',this.lessionForm, (res) => {
							this.showPop = false
							this.$emit('addOver',res)
						})
					}
				});
			}
		}
	}
</script>

<style>

</style>
